<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Shop</title>
<link rel="stylesheet" href="../../style.css" media="screen" />
<link rel="stylesheet" href="../../css/shopping.css" media="screen" />
<link rel="stylesheet" href="../../scripts/cloud-zoom.1.0.2/cloud-zoom.css" type="text/css" />
<link rel="stylesheet" href="../../scripts/fancybox/jquery.fancybox-1.3.4.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery.min.js"></script>
<script type="text/javascript" src="../../scripts/jquery.ui.min.js"></script>
<script type="text/javascript" src="../../scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../../scripts/fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="../../scripts/jquery.carouFredSel-5.0.7.js"></script>
<script type="text/javascript" src="../../scripts/cloud-zoom.1.0.2/cloud-zoom.1.0.2.min.js"></script>
<script type="text/javascript" src="../../scripts/common.js"></script>
<script type="text/javascript">
$(function(){
	 $('#product-list').carouFredSel({
		infinite:false,
			prev: '#prev',
			next:'#next',
			pagination: "#pager-list",
		});
	$('#gallery').carouFredSel({
		circular:false,
		auto:false,
		direction:"down",
		height:315,
		items:{
			'height':70 
		},
		infinite:false,
			prev: '#slide-up',
			next:'#slide-down'
	});
	$('.nav-expand a').toggle(function(){
		$(this).removeClass('active');
		$(this).parent().parent().animate({'right':'-107'}, {duration: 400,easing: 'easeInOutBack'});
	},function(){
		$(this).addClass('active');
		$(this).parent().parent().animate({'right':'0'},{duration: 400,easing: 'easeInOutBack'});
	});
	
	$('#gallery a').click(function(){
		var src = $(this).attr('href');
		$('#product .pic').find('a').attr({'href':src});
		$('#product .pic').find('img').hide().attr({'src':src}).fadeIn('fast');
		$('.cloud-zoom, .cloud-zoom-gallery').CloudZoom( );
		return false;
	});
	
	$('#form-addtocar').submit(function(){
		$.post($(this).attr('action'),$('#form-addtocar').serialize(),function(data){
			if(data){
				alert(data);
			}else{
				alert('complate');
				var v = parseInt($('#car').find('span').text());
				$('#car span').text(v+1);
			}
			return false;
		});
		return false;
	});
	
	 
	$('#form-search').submit(function(){
	if(($('#form-search #q').val() == '')||($('#form-search #q').val() == 'Search Keyword')){
		alert('Please Enter Keyword');
		return false;	
	}		  
	});
	$('#form-search #search').bind('focusin', function() {
		if($(this).val()=='Search Keyword') $(this).val('');
	}).bind('focusout', function() {
		if($(this).val()=='') $(this).val('Search Keyword');
		return false;
	});

/*	$(".category-nav a.active").removeClass('active');
	$(".category-nav a:nth-child($tid)").addClass('active');
	*/
	$('.cloud-zoom, .cloud-zoom-gallery').CloudZoom({position :'inside'});
	$('#more').fancybox();
/*	$('#more').click(function(){
		//$('.detail').animate({height: "100%"},'slow');
		if($('#detail').attr('class') == 'active'){
			$('#detail').css({height: "30px"}).removeClass('active');
			return false;
		}
		$('#detail').css({height: "100%"}).addClass('active');
		return false;	
	});*/
});
</script>
<style type="text/css">
.content-2 {
	padding-bottom:0;
}
.container {
	height:640px;
	margin-bottom:0;
}
.mousetrap {
	width:560px !important;
}
.cloud-zoom-big {
	width:560px !important;
}
#wrap {
	z-index:1 !important;
}
div#wrap-footer {
	position: relative;
}
body#shopping div.content {
    padding: 7em 0 0;
}
div.shadow-l,
div.shadow-r {
	height: 100%;
}
div.shop-brand {
    height: 555px;
    position: absolute;
    right: -55px;
    top: 0;
	overflow: hidden;
    width: 150px;
}

</style>
<script type="text/javascript" src="../../scripts/cufon/cufon-yui.js"></script>
<script type="text/javascript" src="../../scripts/cufon/PSL_Kittithada_Pro___700.font.js"></script>
<script type="text/javascript">
	Cufon.replace('h1,p.name');
</script>
</head>
<body id="shopping">

<div id="wrap-header">

<div class="shadow-l"></div>
<div class="shadow-r"></div>

  <div class="head-l">
    <h1><a href="/home/">Shoe Cafe</a></h1>
  </div>
  <div class="head-r">
    <ul class="topnav">
      <li class="home"><a href="/home/"> </a></li>
      <li class="shoecafe"><a href="/shoe-cafe/"> </a></li>
      <li class="shopping"><a href="/shopping/"> </a></li>
      <li class="category"><a href="/category/"> </a></li>
      <li class="location-shop"><a href="/location-shop/"> </a></li>
      <li class="activity"><a href="/promotion/"> </a></li>
      <li class="contact-us"><a href="/contact-us/"> </a></li>
    </ul>
    <div class="head-login"> <a href="#" class="cart">Shopping Cart</a> $header_user
      <div id="form-login">
        <form action="/profile/login/" class="flogin" id="flogin" method="post">
          <h3>Login</h3>
          <ul>
            <li>
              <label>E-mail Address *</label>
              <input type="text" name="email" id="log_email" value="" />
            </li>
            <li>
              <label>Password *</label>
              <input type="password" name="password" id="log_password" value="" />
            </li>
            <li class="submit">
              <input type="submit" class="submit"  value="submit" />
            </li>
            <li class="links"> <a href="#">Forget your password *</a> <a href="#">Don't have an account yet *</a> </li>
          </ul>
        </form>
        <p class="close"><a href="#">close</a></p>
      </div>
    </div>
  </div>
</div>

<div id="wrap-container">
  <div class="content">
  	<div class="brand-logo"><img src="../../images/example/columbia.jpg" alt="" /></div>
  	<div class="brand-product-list">
    	<ul>
        	<li>
            	<p class="pic"><a href="#"><img src="../../images/example/image-06.jpg" alt="" /></a></p>
                <p class="name"><a href="#">Omni-Heat Ballistic</a></p>
                <p class="price">Price : 5,000 Baht</p>
            </li>
            <li>
            	<p class="pic"><a href="#"><img src="../../images/example/image-06.jpg" alt="" /></a></p>
                <p class="name"><a href="#">Omni-Heat Ballistic</a></p>
                <p class="price">Price : 5,000 Baht</p>
            </li>
            <li>
            	<p class="pic"><a href="#"><img src="../../images/example/image-06.jpg" alt="" /></a></p>
                <p class="name"><a href="#">Omni-Heat Ballistic</a></p>
                <p class="price">Price : 5,000 Baht</p>
            </li>
            <li>
            	<p class="pic"><a href="#"><img src="../../images/example/image-06.jpg" alt="" /></a></p>
                <p class="name"><a href="#">Omni-Heat Ballistic</a></p>
                <p class="price">Price : 5,000 Baht</p>
            </li>
            <li>
            	<p class="pic"><a href="#"><img src="../../images/example/image-06.jpg" alt="" /></a></p>
                <p class="name"><a href="#">Omni-Heat Ballistic</a></p>
                <p class="price">Price : 5,000 Baht</p>
            </li>
            <li>
            	<p class="pic"><a href="#"><img src="../../images/example/image-06.jpg" alt="" /></a></p>
                <p class="name"><a href="#">Omni-Heat Ballistic</a></p>
                <p class="price">Price : 5,000 Baht</p>
            </li>
            <li>
            	<p class="pic"><a href="#"><img src="../../images/example/image-06.jpg" alt="" /></a></p>
                <p class="name"><a href="#">Omni-Heat Ballistic</a></p>
                <p class="price">Price : 5,000 Baht</p>
            </li>
            <li>
            	<p class="pic"><a href="#"><img src="../../images/example/image-06.jpg" alt="" /></a></p>
                <p class="name"><a href="#">Omni-Heat Ballistic</a></p>
                <p class="price">Price : 5,000 Baht</p>
            </li>
            <li>
            	<p class="pic"><a href="#"><img src="../../images/example/image-06.jpg" alt="" /></a></p>
                <p class="name"><a href="#">Omni-Heat Ballistic</a></p>
                <p class="price">Price : 5,000 Baht</p>
            </li>
        </ul>
    </div>
    <div class="page">
    	<ol>
        	<li><a href="#" class="active">1</a><li/>
            <li><a href="#">2</a><li/>
            <li><a href="#">3</a><li/>
            <li><a href="#">4</a><li/>
            <li><a href="#">5</a><li/>
        </ol>
    </div>
  	<br class="clear" />
  </div>
</div>

<div id="wrap-footer">
<div class="shadow-l"></div>
<div class="shadow-r"></div>
	<div class="footer">
    	<a href="http://www.twitter.com/shoecafe" target="_blank" class="tw">Twitter</a>
    	<a href="http://www.facebook.com/ShoeCafe.Fanpage" target="_blank" class="fb">Facebook</a>
        <p class="copyright">Copyright</p>
    </div>
</div>

</body>
</html>